<script setup lang="ts">
import EmailForm from '@/common/components/user/sign-in/form/email/index.vue';
import PhoneForm from '@/common/components/user/sign-in/form/phone/index.vue';
import type { ModalProps } from 'ant-design-vue';


enum LoginModeEnum {
  Phone = "phone",
  Email = 'email'
}


const LoginModeSwitch = {
  [LoginModeEnum.Phone]: "邮箱",
  [LoginModeEnum.Email]: "手机号码"
}


defineOptions({
  name: 'SignInModal'
})

defineEmits(['ok', 'cancel'])

const open = defineModel<boolean>('open', { required: true })

const ModalProps: ModalProps = {
  title: "登录"
}

const loginMode = ref<LoginModeEnum>(LoginModeEnum.Phone)


const FormComponent = computed(() => loginMode.value == LoginModeEnum.Phone ? PhoneForm : EmailForm)

const formComponentRef = ref<InstanceType<typeof FormComponent.value>>()


const handleOk = async () => {
  if (!formComponentRef.value) return
  await formComponentRef.value.submit()
}


const handleChangeLoginMode = () => loginMode.value = loginMode.value == LoginModeEnum.Phone ? LoginModeEnum.Email : LoginModeEnum.Phone
</script>

<template>
  <a-modal title="欢迎您登录" v-model:open="open" ok-text="登录" cancel-text="取消">
    <div class="sign-in-form-container">
      <component ref="formComponentRef" :is="FormComponent" />
    </div>
    <template #footer>
      <a-space size="large">
        <a href="javascript:;" @click.prevent="handleChangeLoginMode">使用{{ LoginModeSwitch[loginMode] }}登录</a>
        <div>
          <a-button @click="$emit('cancel')" type="default">取消</a-button>
          <a-button @click="handleOk" type="primary">登录</a-button>
        </div>
      </a-space>
    </template>
  </a-modal>
</template>

<style scoped lang="scss">
.sign-in {
  &-form {
    &-container {
      display: flex;
      flex-direction: column;
    }

  }

}
</style>